<template>
  <!-- 添加或修改类目对话框 -->
  <el-form ref="dataForm" :model="form" :rules="rules" size="small" label-width="80px" >
    <el-row style="margin: 30px 0 10px;font-size: 14px">
      <el-col :span="24">
        结构类型：
        <el-button
                id="gwButton"
                type="primary"
                style="backgroundcolor: #e1b980"
        >类目</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="上级类目">
          <treeselect
                  v-model="form.parentId"
                  :options="emsKnoResCtgOptionsTree"
                  :normalizer="normalizer"
                  :show-count="true"
                  placeholder="选择上级类目"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入菜单名称" />
    </el-form-item>
    <el-row>
      <el-col :span="24">
        <el-form-item label="排序" prop="sort">
          <el-input-number
                  v-model="form.sort"
                  controls-position="right"
                  :min="0"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="启用状态" prop="delFlag" v-if="form.type !== '1'">
          <el-radio-group v-model="form.delFlag">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="描述" prop="remark">
          <el-input  placeholder="请输入" v-model="form.remark" type="textarea">
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="footer">
      <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
    </div>
  </el-form>
</template>

<script>
    import {fetchCtgTree, addObj, putObj, getEmsknoresctgById} from "@/api/ems/repository/emsknoresctg";
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        name: "emsknoresctg-form",
        components: { Treeselect },
        props: {
            emsKnoResCtgOptionsTree: {
                type: Array,
                default:() => {
                    return []
                }
            },
            ctgItem: {
                type: Object,
                default:() => {
                    return {}
                }
            },
            tabIndex: {
                type: String,
                default:() => {
                    return null
                }
            }
        },
        data() {
            return {
                // 遮罩层
                loading: true,
                // 类目树选项
                ctgOptions: [],
                form: {
                    parentId: null,
                    name: '',
                    type: "",
                    sort: 999,
                    delFlag: "",
                    remark: "",
                },
                // 表单校验
                rules: {
                    // name: [
                    //   { required: true, message: "菜单名称不能为空", trigger: "blur" },
                    // ],
                },
            };
        },
        methods: {
            init(isEdit, parentId, ctgtype, ctgItem) {
                let me = this
                console.log(isEdit, parentId, ctgtype, ctgItem)
                me.form.type = ctgtype
                if (parentId) {
                    this.form.parentId = parentId;
                }else{
                    this.form.parentId = undefined
                }
               // this.getTreeselect(ctgtype);
                this.$nextTick(() => {
                    me.$refs["dataForm"].resetFields();
                    if (isEdit) {
                        getEmsknoresctgById(ctgItem.id).then((res) => {
                            me.form.name = res.data.data.name;
                            me.form.sort = res.data.data.sort;
                            me.form.delFlag = res.data.data.delFlag;
                            me.form.remark = res.data.data.remark;
                        });
                    } else {
                        this.form.parentId = undefined;
                    }
                });
            },
            // 表单提交
            dataFormSubmit() {
                let me = this
                this.$refs["dataForm"].validate((valid) => {
                    if (valid) {
                        if (!me.form.parentId) {
                            me.form.parentId = 0;
                        }

                        if (me.form.id) {
                            putObj(this.form).then((data) => {
                                me.$message.success("修改成功");
                                me.$emit("refreshDataTree");
                            });
                        } else {
                            addObj(this.form).then((data) => {
                                me.$message.success("添加成功");
                                me.$emit("refreshDataTree");
                            });
                        }
                    }
                });
            },
            /** 查询下拉树结构 */
            getTreeselect(ctgtype) {
                this.ctgOptions = []
                fetchCtgTree({type: ctgtype}).then((res) => {
                    this.ctgOptions = res.data && res.data.data;
                });
            },
            /** 转换数据结构 */
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.name,
                    children: node.children,
                };
            },
        },
    };
</script>

<style lang="scss" scoped>
  @import "@/styles/color.scss";
  @import "@/styles/mixin.scss";
  ::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 8px;
  }
  .footer{
    text-align: right;
  }
</style>